<template>
	<div>
		<!-- 导航区 -->
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- 动态传递query参数 —— 字符串硬拼 -->
				<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}&content=${m.content}`">{{m.title}}</router-link> -->

				<!-- 动态传递query参数 —— 字符串硬拼 -->
				<router-link 
					:to="{
						name:'xiangqing',
						query:{
							id:m.id,
							title:m.title,
							content:m.content,
						}
					}"
				>
					{{m.title}}
				</router-link>
			</li>
		</ul>
		<hr>
		<!-- 展示区 -->
		<router-view/>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'9s87qw',title:'《重磅消息》',content:'云服务器不要钱啦！！'},
					{id:'9s87as',title:'《小道消息》',content:'明天放假'},
					{id:'9s87bc',title:'《官方通知》',content:'后天上课'}
				]
			}
		}
	}
</script>